{% extends "admin_base.html" %}

{% block title %}Dashboard Overview{% endblock %}
{% block page_title %}Dashboard Overview{% endblock %}

{% block head_extra %}
<!-- Auto refresh every 30 seconds for live data updates -->
<meta http-equiv="refresh" content="30">
{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Welcome Section -->
    <div
        class="relative overflow-hidden bg-gradient-to-br from-indigo-900/50 to-[#0a192f]/50 backdrop-blur-md p-10 rounded-[2.5rem] border border-[#1f4068]/50 shadow-2xl">
        <div class="relative z-10">
            <h2 class="text-xs font-black text-cyan-400 uppercase tracking-[0.3em] mb-3 text-shadow-glow">Selamat Datang</h2>
            <h3 class="text-4xl font-black text-white tracking-tighter mb-4 uppercase">Administrator Presensi <span
                    class="text-cyan-500">Polda Kalsel</span></h3>
            <p class="text-gray-400 max-w-2xl text-sm leading-relaxed font-medium">
                Halaman untuk monitoring data presensi anggota Polda Kalsel dengan mudah dan cepat.
            </p>
        </div>
        <!-- Decorative Glow -->
        <div class="absolute -right-20 -top-20 w-80 h-80 bg-cyan-600/10 blur-[100px] rounded-full"></div>
        <div class="absolute -left-20 -bottom-20 w-80 h-80 bg-indigo-600/10 blur-[100px] rounded-full"></div>
    </div>

    <!-- Quick Stats Grid (This Month) -->
    <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 lg:gap-6">
        <!-- HADIR -->
        <div class="glass p-3 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] border-t-4 border-t-emerald-500 hover:bg-white/5 transition-all group">
            <div class="flex justify-between items-start mb-2 lg:mb-6">
                <div
                    class="p-2 lg:p-4 bg-emerald-500/10 rounded-xl text-emerald-500 group-hover:scale-110 transition-transform">
                    <i class="fa-solid fa-user-check text-base lg:text-2xl"></i>
                </div>
                <span
                    class="text-[8px] lg:text-[10px] font-black text-emerald-500 bg-emerald-500/5 px-2 lg:px-3 py-1 rounded-full uppercase">Hadir</span>
            </div>
            <h4 class="text-xl lg:text-4xl font-black text-white tracking-tighter mb-1">{{ counts.Hadir }}</h4>
            <p class="text-[8px] lg:text-xs font-bold text-gray-500 uppercase tracking-widest">Tepat Waktu</p>
        </div>

        <!-- TERLAMBAT -->
        <div class="glass p-3 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] border-t-4 border-t-amber-500 hover:bg-white/5 transition-all group">
            <div class="flex justify-between items-start mb-2 lg:mb-6">
                <div class="p-2 lg:p-4 bg-amber-500/10 rounded-xl text-amber-500 group-hover:scale-110 transition-transform">
                    <i class="fa-solid fa-hourglass-half text-base lg:text-2xl"></i>
                </div>
                <span
                    class="text-[8px] lg:text-[10px] font-black text-amber-500 bg-amber-500/5 px-2 lg:px-3 py-1 rounded-full uppercase">Terlambat</span>
            </div>
            <h4 class="text-xl lg:text-4xl font-black text-white tracking-tighter mb-1">{{ counts.Terlambat }}</h4>
            <p class="text-[8px] lg:text-xs font-bold text-gray-500 uppercase tracking-widest">Melebihi Jam</p>
        </div>

        <!-- SAKIT -->
        <div class="glass p-3 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] border-t-4 border-t-rose-500 hover:bg-white/5 transition-all group">
            <div class="flex justify-between items-start mb-2 lg:mb-6">
                <div class="p-2 lg:p-4 bg-rose-500/10 rounded-xl text-rose-500 group-hover:scale-110 transition-transform">
                    <i class="fa-solid fa-notes-medical text-base lg:text-2xl"></i>
                </div>
                <span
                    class="text-[8px] lg:text-[10px] font-black text-rose-500 bg-rose-500/5 px-2 lg:px-3 py-1 rounded-full uppercase">Sakit</span>
            </div>
            <h4 class="text-xl lg:text-4xl font-black text-white tracking-tighter mb-1">{{ counts.Sakit }}</h4>
            <p class="text-[8px] lg:text-xs font-bold text-gray-500 uppercase tracking-widest">Izin Sakit</p>
        </div>

        <!-- IJIN -->
        <div class="glass p-3 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] border-t-4 border-t-cyan-500 hover:bg-white/5 transition-all group">
            <div class="flex justify-between items-start mb-2 lg:mb-6">
                <div class="p-2 lg:p-4 bg-cyan-500/10 rounded-xl text-cyan-500 group-hover:scale-110 transition-transform">
                    <i class="fa-solid fa-envelope-open-text text-base lg:text-2xl"></i>
                </div>
                <span
                    class="text-[8px] lg:text-[10px] font-black text-cyan-500 bg-cyan-500/5 px-2 lg:px-3 py-1 rounded-full uppercase">Izin</span>
            </div>
            <h4 class="text-xl lg:text-4xl font-black text-white tracking-tighter mb-1">{{ counts.Izin }}</h4>
            <p class="text-[8px] lg:text-xs font-bold text-gray-500 uppercase tracking-widest">Izin Lainnya</p>
        </div>

        <!-- TIDAK HADIR (TODAY) -->
        <div
            class="glass p-3 lg:p-6 rounded-[1.5rem] lg:rounded-[2rem] border-t-4 border-t-rose-600 hover:bg-white/5 transition-all group bg-rose-500/5">
            <div class="flex justify-between items-start mb-2 lg:mb-6">
                <div class="p-2 lg:p-4 bg-rose-600/10 rounded-xl text-rose-600 group-hover:scale-110 transition-transform">
                    <i class="fa-solid fa-user-xmark text-base lg:text-2xl"></i>
                </div>
                <span
                    class="text-[8px] lg:text-[10px] font-black text-rose-600 bg-rose-600/10 px-2 lg:px-3 py-1 rounded-full uppercase">Absent</span>
            </div>
            <h4 class="text-xl lg:text-4xl font-black text-white tracking-tighter mb-1">{{ counts.TidakHadirToday }}</h4>
            <p class="text-[8px] lg:text-xs font-bold text-gray-500 uppercase tracking-widest">Belum Absen Hari Ini</p>
        </div>
    </div>


    <!-- Tables Grid -->
    <div class="grid grid-cols-1 xl:grid-cols-12 gap-8">
        <!-- Recent Attendance List -->
        <div class="xl:col-span-12 space-y-6">
            <div class="bg-[#0a192f]/80 rounded-[2.5rem] border border-[#1f4068] shadow-2xl overflow-hidden">
                <div class="p-8 border-b border-[#1f4068] flex justify-between items-center bg-[#0d223f]/40">
                    <div>
                        <h3 class="text-xl font-black text-white uppercase tracking-tight">Presensi Terbaru</h3>
                        <p class="text-[10px] text-gray-500 font-bold uppercase tracking-widest mt-1">10 Data Terakhir
                            Masuk</p>
                    </div>
                </div>
                <div class="overflow-x-auto min-h-[400px] custom-scrollbar">
                    <table class="w-full min-w-[800px] text-left">
                        <thead class="bg-gray-900/70 text-gray-500 text-[10px] uppercase font-black tracking-widest">
                            <tr>
                                <th class="px-8 py-5">Waktu / Tanggal</th>
                                <th class="px-8 py-5">Identitas Anggota</th>
                                <th class="px-8 py-5 text-center">Status</th>
                                <th class="px-8 py-5">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800 text-sm">
                            {% for a in recent_absensi %}
                            <tr class="hover:bg-cyan-500/[0.02] transition-colors group">
                                <td class="px-8 py-6">
                                    <div class="{% if a.tipe == 'pulang' %}text-yellow-400{% else %}text-white{% endif %} font-black text-base">{{ a.waktu_str }}</div>
                                    <div class="text-[10px] text-gray-500 font-bold uppercase tracking-tight mt-1">{{
                                        a.tanggal }}</div>
                                </td>
                                <td class="px-8 py-6">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="h-10 w-10 rounded-xl overflow-hidden bg-gray-900 border {% if a.tipe == 'pulang' %}border-yellow-600{% else %}border-gray-700{% endif %} flex-shrink-0">
                                            {% if a.foto %}
                                                {% if 'data:image' in a.foto[:30] %}
                                                <img src="{{ a.foto }}" class="h-full w-full object-cover">
                                                {% else %}
                                                <div class="h-full w-full flex items-center justify-center text-cyan-400 bg-cyan-900/30">
                                                    <i class="fa-solid fa-file-lines text-lg"></i>
                                                </div>
                                                {% endif %}
                                            {% else %}
                                            <div class="h-full w-full flex items-center justify-center text-[8px] text-gray-600">
                                                NO IMG</div>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <div class="font-black text-white">{{ a.nama }}</div>
                                            <div class="text-[10px] font-bold text-gray-500">ID: {{ a.id_anggota }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-6 text-center">
                                    {% set lower_status = a.status|lower %}
                                    {% if a.tipe == 'pulang' %}
                                        <div class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-yellow-500/20 border border-yellow-500/30 text-yellow-400 rounded-lg text-[10px] font-black uppercase tracking-wider">
                                            <i class="fa-solid fa-house-chimney"></i> {{ a.keterangan or 'Pulang' }}
                                        </div>
                                    {% elif lower_status == 'hadir' %}
                                        <div class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-emerald-500/20 border border-emerald-500/30 text-emerald-400 rounded-lg text-[10px] font-black uppercase tracking-wider">
                                            <i class="fa-solid fa-check"></i> Hadir
                                        </div>
                                    {% elif lower_status == 'terlambat' %}
                                        <div class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-amber-500/20 border border-amber-500/30 text-amber-400 rounded-lg text-[10px] font-black uppercase tracking-wider">
                                            <i class="fa-solid fa-clock"></i> Terlambat
                                        </div>
                                    {% elif lower_status in ['izin', 'ijin'] %}
                                        <div class="flex flex-col items-center gap-1.5">
                                            <div class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-cyan-500/20 border border-cyan-500/30 text-cyan-400 rounded-lg text-[10px] font-black uppercase tracking-wider">
                                                <i class="fa-solid fa-envelope"></i> Izin
                                            </div>
                                            {% if a.keterangan %}
                                            <span class="text-[9px] text-gray-500 italic font-bold text-center leading-tight">{{ a.keterangan }}</span>
                                            {% endif %}
                                        </div>
                                    {% else %}
                                        <div class="flex flex-col items-center gap-1.5">
                                            <div class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-rose-500/20 border border-rose-500/30 text-rose-400 rounded-lg text-[10px] font-black uppercase tracking-wider">
                                                <i class="fa-solid fa-notes-medical"></i> {{ a.status }}
                                            </div>
                                            {% if a.keterangan %}
                                            <span class="text-[9px] text-gray-500 italic font-bold text-center leading-tight">{{ a.keterangan }}</span>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </td>
                                <td class="px-8 py-6">
                                    <button onclick="showDetail({
                                            nama: '{{ a.nama }}',
                                            id: '{{ a.id_anggota }}',
                                            waktu: '{{ a.waktu }}',
                                            tanggal: '{{ a.tanggal }}',
                                            status: '{{ a.status }}',
                                            foto: '{{ a.foto }}',
                                            ttd: '{{ a.tanda_tangan }}',
                                            lat: '{{ a.latitude }}',
                                            lon: '{{ a.longitude }}'
                                        })"
                                        class="h-8 w-8 bg-gray-800 rounded-lg flex items-center justify-center text-gray-500 hover:text-cyan-400 hover:bg-gray-700 transition-all shadow-lg"
                                        title="Lihat Detail">
                                        <i class="fa-solid fa-chevron-right text-[10px]"></i>
                                    </button>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="4" class="px-8 py-20 text-center">
                                    <div class="flex flex-col items-center gap-4 text-gray-600">
                                        <i class="fa-solid fa-folder-open text-4xl"></i>
                                        <p class="text-xs font-bold uppercase tracking-widest">Belum ada aktivitas
                                            presensi</p>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


    </div>
</div>

<!-- Modal Detail Presensi (Compact Rectangular Version) -->
<div id="detailModal" class="fixed inset-0 z-[60] hidden flex items-center justify-center p-4">
    <div class="absolute inset-0 bg-[#020617]/90 backdrop-blur-md" onclick="closeDetail()"></div>
    <div
        class="relative bg-[#0a192f] border border-cyan-500/30 w-full max-w-2xl rounded-[1.5rem] shadow-[0_0_50px_rgba(0,255,255,0.1)] overflow-hidden animate-in zoom-in duration-300">

        <!-- Header Row -->
        <div class="p-4 border-b border-white/5 flex justify-between items-center bg-white/5">
            <div class="flex gap-4 items-center">
                <div id="mStatus"
                    class="px-3 py-1 bg-emerald-500/20 text-emerald-400 text-[10px] font-black uppercase tracking-widest rounded-lg">
                    HADIR</div>
                <div class="text-[9px] text-gray-400 font-bold uppercase">
                    <span id="mDate">17 Apr 2026</span> • <span id="mTime" class="text-white">10:55:39</span>
                </div>
            </div>
            <button onclick="closeDetail()"
                class="h-8 w-8 flex items-center justify-center rounded-full hover:bg-white/10 text-gray-500 hover:text-white transition-all">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <div class="flex flex-col md:flex-row">
            <!-- Left Side: Photo (Large Square) -->
            <div class="w-full md:w-[45%] p-4 border-r border-white/5 bg-black/20">
                <p class="text-[9px] font-black text-gray-500 uppercase tracking-widest mb-2"><i
                        class="fa-solid fa-camera mr-1"></i> Foto Selfie</p>
                <div class="aspect-square w-full rounded-xl overflow-hidden bg-black border border-white/10">
                    <img id="mFoto" src="" class="w-full h-full object-cover">
                </div>
            </div>

            <!-- Right Side: Data & Small Assets -->
            <div class="w-full md:w-[55%] p-4 space-y-4">
                <!-- User Info -->
                <div class="flex items-center gap-3 bg-cyan-500/5 p-3 rounded-xl border border-cyan-500/10">
                    <div class="h-10 w-10 bg-cyan-500/20 rounded-lg flex items-center justify-center text-cyan-400">
                        <i class="fa-solid fa-id-badge text-xl"></i>
                    </div>
                    <div>
                        <h4 id="mNama" class="text-sm font-black text-white leading-tight">Budi Pratama</h4>
                        <p id="mNRP" class="text-[10px] text-gray-500 font-bold">NRP. 87980995</p>
                    </div>
                </div>

                <!-- TTD & Map (Horizontal Pair) -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1.5">
                        <p class="text-[8px] font-black text-gray-500 uppercase tracking-widest"><i
                                class="fa-solid fa-signature mr-1"></i> Tanda Tangan</p>
                        <div
                            class="bg-white rounded-lg h-24 flex items-center justify-center p-2 border border-white/10 shadow-inner">
                            <img id="mTTD" src="" class="max-h-full max-w-full object-contain">
                        </div>
                    </div>
                    <div class="space-y-1.5">
                        <p class="text-[8px] font-black text-gray-500 uppercase tracking-widest"><i
                                class="fa-solid fa-location-dot mr-1"></i> Lokasi GPS</p>
                        <div id="mMap" class="h-24 rounded-lg overflow-hidden border border-white/10 bg-gray-900"></div>
                    </div>
                </div>

                <!-- Footer Action -->
                <button onclick="closeDetail()"
                    class="w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-black font-black text-[10px] rounded-lg shadow-lg hover:shadow-cyan-500/20 transition-all uppercase tracking-widest mt-2">
                    <i class="fa-solid fa-check-circle mr-2"></i> Tutup Detail
                </button>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    let detailMap = null;
    let detailMarker = null;

    function showDetail(data) {
        document.getElementById('mNama').textContent = data.nama;
        document.getElementById('mNRP').textContent = "NRP. " + (data.id || '-');
        document.getElementById('mTime').textContent = data.waktu;
        document.getElementById('mDate').textContent = data.tanggal;
        document.getElementById('mStatus').textContent = (data.status || 'Hadir').toUpperCase();
        document.getElementById('mFoto').src = data.foto || '';
        document.getElementById('mTTD').src = data.ttd || '';

        // Status Badge Styling
        const sBadge = document.getElementById('mStatus');
        if (data.status === 'Hadir') {
            sBadge.className = "px-3 py-1 bg-emerald-500/20 text-emerald-400 text-[10px] font-black uppercase tracking-widest rounded-lg";
        } else if (data.status === 'Terlambat') {
            sBadge.className = "px-3 py-1 bg-amber-500/20 text-amber-400 text-[10px] font-black uppercase tracking-widest rounded-lg";
        } else {
            sBadge.className = "px-3 py-1 bg-rose-500/20 text-rose-400 text-[10px] font-black uppercase tracking-widest rounded-lg";
        }

        document.getElementById('detailModal').classList.remove('hidden');

        // Fix Map Initialization
        const lat = parseFloat(data.lat);
        const lon = parseFloat(data.lon);

        if (detailMap) {
            detailMap.remove();
            detailMap = null;
        }

        setTimeout(() => {
            try {
                if (lat && lon && !isNaN(lat) && !isNaN(lon)) {
                    detailMap = L.map('mMap', { zoomControl: false, attributionControl: false }).setView([lat, lon], 16);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(detailMap);
                    L.marker([lat, lon]).addTo(detailMap);

                    // Trigger resize fix
                    setTimeout(() => detailMap.invalidateSize(), 200);
                } else {
                    document.getElementById('mMap').innerHTML = '<div class="h-full w-full flex items-center justify-center text-[8px] text-gray-600 uppercase">GIS Offline</div>';
                }
            } catch (e) {
                console.error("Map Load Error:", e);
            }
        }, 400);
    }

    function closeDetail() {
        document.getElementById('detailModal').classList.add('hidden');
    }

</script>
{% endblock %}